{% extends "base.html" %}{% load static %}
{% block title %}不同类别下出版社发行量Top5{% endblock %}
{% block style %}
<style>
    html, body {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
        min-height: 100vh;
    }

    #wrapper {
        background: linear-gradient(135deg, #1a1a1a, #2a2a2a) !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: calc(100vh - 116px) !important;
    }

    .chart-container {
        width: 100%;
        max-width: 1200px;
        background: rgba(26, 26, 26, 0.8);
        border-radius: 15px;
        padding: 2rem;
        box-shadow: 0 0 30px rgba(0, 123, 255, 0.3);
        backdrop-filter: blur(10px);
        margin: 2rem auto;
        color: #fff;
    }

    .category-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        margin-bottom: 2rem;
        padding: 1rem;
    }

    .category {
        padding: 0.5rem 1.5rem;
        font-size: 1rem;
        color: #fff;
        background: rgba(0, 191, 255, 0.1);
        border-radius: 20px;
        transition: all 0.3s ease;
        border: 1px solid rgba(0, 191, 255, 0.2);
    }

    .category:hover {
        background: rgba(0, 191, 255, 0.2);
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(0, 123, 255, 0.2);
    }

    #chart {
        height: 600px;
        margin-top: 2rem;
    }

    .neon-text {
        color: #00bfff;
        text-shadow: 0 0 10px rgba(0, 191, 255, 0.5);
        font-size: 1.8rem;
        letter-spacing: 2px;
        margin-bottom: 2rem;
        text-align: center;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="chart-container">
        <h2 class="neon-text">出版社发行量分析</h2>
        <div class="category-nav">
            <a href="{% url 'system:chart2' %}">
                <span class="category">刷新</span>
            </a>
            {% for item in categories %}
                <a href="{% url 'system:chart2' %}?category={{ item.category }}">
                    <span class="category">{{ item.category }}</span>
                </a>
            {% endfor %}
        </div>
        {% if category %}
            <div id="chart"></div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block script %}
    <script>
        var data = {{ data|safe }};
        var Chart = echarts.init(document.getElementById('chart'));
        option = {
            title: {
                text: '',
                subtext: '',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'right',
                textStyle: {
                    color: '#fff',
                    fontSize: 12
                },
                data: data.x_data
            },
            series: [
                {
                    name: '出版社',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: true,
                    label: {
                        show: true,
                        position: 'outside',
                        formatter: '{b}: {c} ({d}%)',
                        color: '#fff',
                        fontSize: 12,
                        lineHeight: 20,
                        rich: {
                            b: {
                                color: '#fff',
                                fontSize: 12,
                                lineHeight: 20
                            }
                        }
                    },
                    labelLine: {
                        show: true,
                        length: 10,
                        length2: 20,
                        lineStyle: {
                            color: '#fff'
                        }
                    },
                    data: data.y_data,
                    itemStyle: {
                        normal: {
                            color: function(params) {
                                var colorList = [
                                    '#00bfff',
                                    '#00ffcc',
                                    '#00ff99',
                                    '#33ccff',
                                    '#3399ff',
                                    '#3366ff'
                                ];
                                return colorList[params.dataIndex % colorList.length];
                            },
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
        Chart.setOption(option);
    </script>
{% endblock %}